<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<link href="css/bksystem.css" rel="stylesheet" type="text/css" />
		<link href="skin/black/skin.css" rel="stylesheet" type="text/css" id="skin" />
		<link href="css/module.css" rel="stylesheet" type="text/css" />
		<link href="font/iconfont.css" rel="stylesheet" type="text/css" />
		<title>登录</title>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="js/jquery.cookie.js" type="text/javascript"></script>
		<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
		<script src="js/BKframe.js" type="text/javascript"></script>
		<!--[if lt IE 9]>
          <script src="js/html5shiv.js" type="text/javascript"></script>
          <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
		  <script src="./static/js/vue.min.js"></script>
        <![endif]-->
	</head>
	<body class="login-layout Reg_log_style" id="loginstyle">
	<form>
		<div class="logintop">
			<span>后台管理界面平台</span>
			<ul>
				<li>
					<a href="#">返回首页</a>
				</li>
				<li>
					<a href="#">帮助</a>
				</li>
				<li>
					<a href="#">关于</a>
				</li>
			</ul>
		</div>
		<div class="loginbody">
			<div class="login-container">
				<div class="center"> <img src="images/logo.png" /></div>
				<div class="space-6"></div>
				<div class="position-relative">
					<div id="login-box" class="login-box widget-box no-border visible">
						<div class="login-main">
							<!--皮肤选择-->
							<div class="skin-section">
								<a href="javascript:void(0)" class="skin-btn clickBombbox iconfont icon-pifushezhi" id="skin-btn"></a>
								<div class="Bombbox">
									<ul class="skin-list">
										<li>
											<a class="colorpick-btn" href="javascript:void(0)" data-val="black" id="default" style="background-color:#222A2D"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0)" data-val="blue" style="background-color:#438EB9;"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0)" data-val="green" style="background-color:#72B63F;"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0)" data-val="gray" style="background-color:#067350;"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0)" data-val="red" style="background-color:#FF6868;"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0)" data-val="purple" style="background-color:#6F036B;"></a>
										</li>
									</ul>
								</div>
							</div>
							<div class="clearfix">
								<div class="login_icon"><img src="images/login_img.png" /></div>
								<form class="" style=" width:300px; float:right; margin-right:50px;">
									<h4 class="title_name"><img src="images/login_title.png" /></h4>
									<fieldset>
										<ul>
											<li class="frame_style form_error"><label class="user_icon iconfont">&#xe620;</label><input v-model="username" type="text" data-name="用户名" id="username" /><i>用户名</i></li>
											<li class="frame_style form_error"><label class="password_icon iconfont">&#xe625;</label><input v-model="password" type="password" data-name="密码" id="userpwd" /><i>密码</i></li>
											<li class="frame_style form_error"><label class="Codes_icon iconfont">&#xe624;</label><input name="" type="text" data-name="验证码" id="Codes_text" /><i>验证码</i>
												<div class="Codes_region"><img src="images/yanzhengma.png" width="100%" height="38px"></div>
											</li>
										</ul>
										<div class="space"></div>
										<div class="clearfix">
											<label class="inline">
												<input type="checkbox" class="ace">
												<span class="lbl">保存密码</span>
											</label>
											<button type="submit" class="login_btn" id="login_btn"> 登&nbsp;陆 </button>
										</div>

										<div class="space-4"></div>
									</fieldset>
								</form>
							</div>
							<div class="social-or-login center">
								<span class="bigger-110">通知</span>
							</div>
							<div class="social-login ">
								为了更好的体验性（兼容移动端），本网站系统不再对IE8（含IE8）以下浏览器支持，请见谅。
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="loginbm">版权所有 2023</div>
	</form>
	</body>
</html>
<script type="text/javascript">
	//验证登录
	$(document).ready(function() {	
		$("input[type='text'],input[type='password']").blur(function() {
			var $el = $(this);
			var inputname=0;
			var $parent = $el.parent();
			$parent.attr('class', 'frame_style').removeClass(' form_error');
			if($el.val() == '') {
				var name=$el.attr("data-name");
				$parent.attr('class', 'frame_style').addClass(' form_error form_prompt');
				$parent.find('i').eq(inputname).html(name+"不能为空").addClass("prompt");
			}
		});
		$("input[type='text'],input[type='password']").focus(function() {
			var $el = $(this);
			var $parent = $el.parent();
			if($el.val() == '') {
				$parent.attr('class', 'frame_style').addClass(' form_errors');
			} else {
				$parent.attr('class', 'frame_style').removeClass(' form_errors');
			}
		});
	  $('#login_btn').on('click', function() {
		var num = 0;
		var str = "";
		$("input[type$='text'],input[type$='password']").each(function(n) {
			var $el = $(this);
			var inputname=0;
			var $parent = $el.parent();
			if($el.val() == "") {
				var name=$el.attr("data-name");
				$parent.attr('class', 'frame_style').addClass(' form_error form_prompt');
                 $parent.find('i').eq(inputname).html(name+"不能为空").addClass("prompt");
				num++;
				return false;
			}
		});
		if(num > 0) {
			return false;
		} else {
			//ajax 判断用户名是否存在
			location.href = "index.jsp";
		}
	});
	})
	//框架设置
	$(function() {
		$("#loginstyle").BKframe({
               //必须保留否则无法进行皮肤更换，以及兼容移动端
               
		})
	});
	//
	new Vue({
		el: '.login',
		data: {
			loading: false, // 锁
			username: '',
			password: '',
		},
		methods: {
			login: function() {
				this.loading = true;
				$.get('${pageContext.request.contextPath}/LoginServlet',{
					username:this.username,
					pwd:this.password,
					_token:'{{csrf_token()}}'
				},res=>{
					this.loading = false;
					if(res==1){
						location.href = 'index.jsp';
					}else{
						$("#msg").html("登录失败，请检查用户名和密码");
					}
				})
				// setTimeout(() => {
				//     window.location.href = 'index.jsp';
				// }, 3000);
			},
		},
	});
</script>